<template>
  <div class='container'>
    <el-card class="shiti">
      <el-row
        type="flex"
        align="middle"
        class="mulu"
        border=""
      >
        <el-col>试题录入</el-col>
      </el-row>
      <el-row>
        <el-form
          ref="formData"
          :rules="rules"
          :model="formData"
          label-width="100px"
        >
          <el-form-item
            prop="label"
            label="学科:"
          >
            <el-select
              v-model="formData.label"
              @focus="getSubject"
              style="width: 300px"
              :validate-event="false"
            >
              <el-option
                v-for="(item, index) in subject"
                :key="index"
                :label="item.subjectName"
                :value="item.subjectName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="directoryName"
            label="目录:"
          >
            <el-select
              v-model="formData.directoryName"
              style="width: 300px"
              @focus="getCatalogue"
            >
              <el-option
                v-for="item in catalogue"
                :key="item.id"
                :label="item.directoryName"
                :value="item.directoryName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="shortName"
            label="企业:"
          >
            <el-select
              v-model="formData.shortName"
              style="width: 300px"
              @focus="getEnterprise"
            >
              <el-option
                v-for="item in enterprise"
                :key="item.id"
                :label="item.shortName"
                :value="item.shortName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="province"
            label="城市:"
          >
            <el-select
              v-model="formData.province"
              style="width: 150px; margin-right: 3px"
              @focus="provinces"
              @change="dd(formData.province)"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.id"
                :label="item.province"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              v-model="formData.city"
              style="width: 147px"
            >
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.city"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="direction"
            label="方向:"
          >
            <el-select
              v-model="formData.direction"
              style="width: 300px"
              @focus="getDirection"
            >
              <el-option
                v-for="item in directionList"
                :key="item.id"
                :label="item.direction"
                :value="item.direction"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题形:">
            <template>
              <el-radio-group v-model="radio">
                <el-radio :label="3">单选</el-radio>
                <el-radio :label="6">多选</el-radio>
                <el-radio :label="9">简答</el-radio>
              </el-radio-group>
            </template>
          </el-form-item>
          <el-form-item label="难度:">
            <template>
              <el-radio-group v-model="radio1">
                <el-radio :label="3">简单</el-radio>
                <el-radio :label="6">一般</el-radio>
                <el-radio :label="9">困难</el-radio>
              </el-radio-group>
            </template>
          </el-form-item>
          <!-- 富文本编辑器 -->
          <el-form-item
            label="题干:"
            class="fuwenben"
          >
            <quill-editor
              ref="text"
              v-model="content"
              class="editor"
              :options="editorOption"
            />
          </el-form-item>
          <!-- /富文本编辑器 -->
          <!-- 上传图片-------------------------------------------------------------------------------------- -->
          <!-- <el-form-item label="选项:"> -->
          <jingyong v-if="radio==3" />
          <xuanyong v-if="radio==6" />
          <!-- </el-form-item> -->
          <!-- /上传图片----------------------------------------------------------------------------------------------------------- -->
          <el-form-item label="解析视频:">
            <el-input style="width: 370px" />
          </el-form-item>
          <el-form-item
            label="答案解析："
            class="fuwenben"
          >
            <quill-editor
              ref="text"
              v-model="content1"
              class="editor"
              :options="editorOption"
            />
          </el-form-item>
          <el-form-item label="题目备注:">
            <el-input
              type="textarea"
              class="timubeizhu"
              :rows="4"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="tags"
            label="试题标签:"
          >
            <el-select
              @focus="getTags"
              style="width: 370px"
              placeholder="请选择标签"
              v-model="formData.tags"
              multiple
            >
              <el-option
                v-for="item in tagsList"
                :key="item.id"
                :label="item.tagName"
                :value="item.tagName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="handleConfirm('formData')"
              type="primary"
            >确认提交</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import xuanyong from './xuanyong'
import jingyong from './jingyong'
import { provinces, citys } from '@/api/hmmm/citys'
import { getSubject, getCatalogue, getEnterprise, getDirection, getTags } from '@/api/hmmm/questions'
export default {
  name: 'questions-new',
  components: {
    quillEditor,
    xuanyong,
    jingyong
  },
  data () {
    return {
      // 单选，多选
      radio: 3,
      radio1: 3,
      radio2: 1,
      // 富文本
      content: '',
      content1: '',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'],
            ['image'],
            ['link']
          ]
        }
      },
      formData: {
        label: '',
        directoryName: '',
        shortName: '',
        province: '',
        city: '',
        direction: '',
        tags: ''
      },
      rules: {
        label: [{ required: true, message: '请选择学科' }],
        directoryName: [{ required: true, message: '请选择目录' }],
        shortName: [{ required: true, message: '请选择企业' }],
        province: [{ required: true, message: '请选择地区' }],
        direction: [{ required: true, message: '请选择方向' }]
      },
      subject: [],
      catalogue: [],
      enterprise: [],
      provinceList: [],
      cityList: [],
      directionList: [],
      tagsList: []
    }
  },
  methods: {
    // 学科
    async getSubject () {
      const data = await getSubject()
      // console.log(data)
      this.subject = data.data.items
    },
    // // 目录
    async getCatalogue () {
      const data = await getCatalogue()
      console.log(data)
      this.catalogue = data.data.items
    },
    // // 企业
    async getEnterprise () {
      const data = await getEnterprise()
      console.log(data)
      this.enterprise = data.data.items
    },
    // 方向
    async getDirection () {
      const data = await getDirection()
      console.log(data)
      this.directionList = data.data.items
    },
    async getTags () {
      const data = await getTags()
      this.tagsList = data.data.items
    },
    async provinces () {
      const data = await provinces()
      console.log(data)
      this.provinceList = data
    },
    // 城市
    dd (a) {
      this.cityList = citys(a)
      console.log(this.cityList)
    },
    handleConfirm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push('list')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
.mulu {
  height: 30px;
  // border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}
.editor {
  line-height: normal !important;
  height: 200px;
}
.fuwenben {
  margin-bottom: 100px;
}
.timubeizhu {
  width: 370px;
}
.el-form-item__error {
  top: 125;
}
</style>
